<template>
  <b-page class="hdgl-edit">
    <a-steps
      :current="step"
      status="wait"
      type="navigation"
      size="small"
      :style="stepStyle">
      <a-step title="基本信息">
        <span slot="icon"/>
      </a-step>
      <a-step title="公众号">
        <span slot="icon"/>
      </a-step>
      <a-step title="裂变海报">
        <span slot="icon"/>
      </a-step>
      <a-step title="进度文案">
        <span slot="icon"/>
      </a-step>
      <a-step title="其他文案">
        <span slot="icon"/>
      </a-step>
    </a-steps>
    <div class="hdgl-edit-step-list">
      <hdgl-edit-step1 v-if="visible" ref="step0" :model="model" v-show="step===0"/>
      <hdgl-edit-step2 v-if="visible" ref="step1" :model="model" v-show="step===1"/>
      <hdgl-edit-step3 v-if="visible" ref="step2" :model="model" v-show="step===2"/>
      <hdgl-edit-step4 v-if="visible" ref="step3" :model="model" v-show="step===3"/>
      <hdgl-edit-step5 v-if="visible" ref="step4" :model="model" v-show="step===4"/>
      <!--            <hdgl-edit-step6 ref="step5" :model="model" v-show="step===5"/>-->

    </div>
    <div class="operator-btn-list">
      <div class="operator-btn-content">
        <b-button
          type="primary"
          v-if="step>0"
          btnContent="上一页"
          @click="prev"/>
        <b-button
          type="default"
          ghost="default"
          btnContent="取消"
          style="margin: 0 8px"
          @click="back"/>
        <b-button
          type="primary"
          btnContent="保存"
          v-if="step===4"
          @click="save"/>
        <b-button
          type="primary"
          v-if="step<4"
          btnContent="下一页"
          @click="next">
        </b-button>
      </div>
    </div>
  </b-page>
</template>

<script>
    import HdglEditStep1 from './sub/hdgl-edit-step-1'
    import HdglEditStep2 from './sub/hdgl-edit-step-2'
    import HdglEditStep3 from './sub/hdgl-edit-step-3'
    import HdglEditStep4 from './sub/hdgl-edit-step-4'
    import HdglEditStep5 from './sub/hdgl-edit-step-5'
    import HdglEditStep6 from './sub/hdgl-edit-step-6'
    import GameTaskAPI from '../../../../api/mp/gameTask'
    import { funDate } from '../../../utils'

    export default {
        name: 'HdglEdit',
        components: {
            HdglEditStep2,
            HdglEditStep3,
            HdglEditStep4,
            HdglEditStep5,
            HdglEditStep6,
            HdglEditStep1
        },
        data () {
            return {
                stepStyle: {
                    marginBottom: '35px',
                    boxShadow: '0px -1px 0 0 #D9D9D9 inset',
                    width: '470px'
                },
                loading: false,
                step: 0,
                stepLength: 5,
                visible: false,
                finishMsg: '<p>您好！您的好友<span class="mceNonEditable">昵称</span>支持你了！<br/>您已获得<span class="mceNonEditable">已完成任务量</span>个好友的支持<br/>恭喜您完成任务！</p>',
                helpSuccessMsg: '你已获得<span class="mceNonEditable">已完成任务量</span>个好友的支持<br/>还差<span class="mceNonEditable">未完成任务量</span>个好友支持，即可获得奖励</p>',
                receiveHelpMsg: '<p>您好！您的好友<span class="mceNonEditable">昵称</span>支持你了！',
                msgUnfollow: '<p>哎呀，您的好友【<span class="mceNonEditable">昵称</span>】刚刚取消关注了，<br/>该好友助力失效啦，<br/>只差<span class="mceNonEditable">未完成任务量</span>位好友就能领取工具包啦，<br/>赶快去邀请更多好友助力吧！</p>',
                msgAfterFinish: '<p>任务已完成！您的好友<span class="mceNonEditable">昵称</span>又支持你了<br/>人气值+1<br/>目前已有<span class="mceNonEditable">已完成任务量</span>人支持你！</p>',
                msgOver: '<p>本次活动已经结束了，感谢您的参与<br/>添加小助手微信：985563224<br/>可免费领取&ldquo;感恩大礼包&rdquo;一份</p>',
                msgRepeat: '<p>啊哦，您是我们的老朋友啦，快去邀请更多好友助力吧！</p>',
                overLimitMsg: '<p>为了不频繁的打扰您，今天的活<br/>动进度就暂时为您汇报到这里了<br/><br/>任务完成时，您会收到任务完成通知</p>',
                id: null,
                model: {}
            }
        },
        computed: {
            query () {
                return this.$route.query
            },
            gameId () {
                return this.query.gameId
            },
            gzhUserId () {
                return this.$store.state.user.info.gzhUserId
            }
        },
        mounted () {
            this.open()
        },
        methods: {
            open () {
                // this.visible = true;
                if (this.gameId) {
                    this.id = this.gameId
                    this.getModel()
                } else {
                    this.initModel()
                }
            },
            initModel () {
                const time = funDate(7)
                this.model = {
                    name: '',
                    endTime: time,
                    triggerKeyword: '',
                    gzhUserId: this.gzhUserId,
                    keywordReply: '你已报名参加**活动',
                    stock: 4,
                    posterElements: '{"header":{"visible":true,"circle":true,"x":-2,"y":-2,"size":148},"nickname":{"visible":true,"color":"#101010","size":18,"textAlign":"center","x":136,"y":14,"w":160,"h":79},"qrCode":{"visible":true,"w":null,"h":null,"x":495,"y":1088,"size":233}}   ',
                    msgUnfollow: this.msgUnfollow,
                    msgAfterFinish: this.msgAfterFinish,
                    msgOver: this.msgOver,
                    msgRepeat: this.msgRepeat,
                    overLimitMsg: this.overLimitMsg,
                    /**
                     * 奖励列表
                     */
                    awardList: [{
                        finishMsg: this.finishMsg,
                        helpSuccessMsg: this.helpSuccessMsg,
                        // receiveHelpMsg: this.receiveHelpMsg,
                        target: 1
                    }, {
                        finishMsg: this.finishMsg,
                        helpSuccessMsg: this.helpSuccessMsg,
                        receiveHelpMsg: this.receiveHelpMsg,
                        target: 4
                    }],
                    /**
                     * 公众号列表
                     */
                    mpList: []
                }
                this.visible = true
                const _this = this
                // 因为插件需要更改值来确保位置的准确性
                setTimeout(() => {
                    _this.fixLoaded(this.model, 1)
                }, 100)
                setTimeout(() => {
                    _this.fixLoaded(this.model)
                }, 300)
            },
            getModel () {
                this.loading = true
                GameTaskAPI.getGameById(this.id, this.gzhUserId).then(res => {
                    this.model = Object.assign({}, res)
                    this.visible = true
                    const _this = this
                    setTimeout(() => {
                        _this.fixLoaded(res, 1)
                        this.initAwardList()
                        this.initMsg()
                    }, 500)
                    setTimeout(() => {
                        _this.fixLoaded(res)
                    }, 1500)
                    this.loading = false
                }).catch(err => {
                    this.$message.error('加载错误，请检查网络是否通畅')
                    this.loading = false
                    console.error(err)
                })
            },
            back () {
                this.$router.push({
                    path: '/lbsq/rwb/index'
                })
            },
            initMsg () {
                if (!this.model.msgUnfollow) {
                    this.model.msgUnfollow = this.msgUnfollow
                }
                if (!this.model.msgRepeat) {
                    this.model.msgRepeat = this.msgRepeat
                }
                if (!this.model.overLimitMsg) {
                    this.model.overLimitMsg = this.overLimitMsg
                }
                if (!this.model.msgAfterFinish) {
                    this.model.msgAfterFinish = this.msgAfterFinish
                }
                if (!this.model.msgOver) {
                    this.model.msgOver = this.msgOver
                }
            },
            initAwardList () {
                this.model.awardList.forEach(item => {
                    if (!item.finishMsg) {
                        item.finishMsg = this.finishMsg
                    }
                    if (!item.helpSuccessMsg) {
                        item.helpSuccessMsg = this.helpSuccessMsg
                    }
                    if (!item.receiveHelpMsg) {
                        item.receiveHelpMsg = this.receiveHelpMsg
                    }
                })
            },
            prev () {
                try {
                    this.step = (this.step + 4) % this.stepLength
                } catch (e) {
                    this.$message.error(e.message)
                }
            },
            next () {
                try {
                    this.step = (this.step + 1) % this.stepLength
                } catch (e) {
                    this.$message.error(e.message)
                }
            },
            loaded (model) {
                for (let i = 0; i < this.stepLength; i++) {
                    const stepRef = 'step' + i
                    if (this.$refs[stepRef].loaded) {
                        // 如果子组件定义了loaded，就调用
                        this.$refs[stepRef].loaded(model)
                    }
                }
            },
            fixLoaded (model, temp) {
                for (let i = 0; i < this.stepLength; i++) {
                    const stepRef = 'step' + i
                    if (this.$refs[stepRef].loaded) {
                        // 如果子组件定义了loaded，就调用
                        this.$refs[stepRef].fixLoaded(model, temp)
                    }
                }
            },
            checkStep (step) {
                const stepRef = 'step' + step
                this.$refs[stepRef].check()
            },
            save () {
                // 保存之前从当前位置逐条判断是否可以保存，先判断当前，然后判断123456, 有错误就打断
                try {
                    this.checkStep(this.step)
                    for (let i = 0; i < this.stepLength; i++) {
                        this.checkStep(i)
                    }
                } catch (e) {
                    this.$message.error(e.message)
                    return
                }
                this.loading = true
                GameTaskAPI.save(this.model).then(res => {
                    this.model.id = res.id
                    this.model.version = res.version
                    if (res) {
                        this.loading = false
                        this.$confirm({
                            title: '提示',
                            content: '保存成功, 是否返回列表?',
                            okText: '返回列表',
                            cancelText: '继续编辑',
                            iconType: 'check-circle',
                            onOk: () => {
                                this.$router.push({
                                    path: '/lbsq/rwb/index'
                                })
                            }
                        })
                    }
                }).catch(err => {
                    this.loading = false
                    console.log(err.message)
                    this.$message.error(err.response.data.message)
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .hdgl-edit {
        min-height: 100%;
        min-width: 900px;
        display: flex;
        flex-direction: column;
        padding: 0 10px 50px;
        background: white;

        .hdgl-edit-step-list {
            flex-grow: 1;
            margin-top: 8px;
        }

        .operator-btn-list {
            position: fixed;
            left: 256px;
            width: 100%;
            bottom: 0;
            background: white;
            z-index: 100;

            .operator-btn-content {
                width: 900px;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                box-shadow: 0 -1px 0px 0px #eee;
            }
        }
    }
</style>
